<template>
  <div>
    <el-input v-model="dealerCodeInName" :disabled="dealerDis" readonly placeholder="职位选择">
      <i slot="suffix" class="el-input__icon el-icon-search" @click="openDia"/>
      <i slot="suffix" class="el-input__icon el-icon-error" @click="changeDE" />
    </el-input>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="职位选择" width="70%">
      <!-- 查询条件 -->
      <el-form
        ref="searchDealerForm"
        :inline="true"
        :model="search"
        size="mini"
        class="searchform"
        label-width="100px"
        label-position="right"
      >
        <el-form-item prop="positionCode" label="职位代码">
          <el-input v-model="search.positionCode" placeholder="职位代码" class="search-input" clearable/>
        </el-form-item>
        <el-form-item prop="positionName" label="职位名称">
          <el-input v-model="search.positionName" placeholder="职位名称" class="search-input" clearable/>
        </el-form-item>
        <br>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchRole">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 用户列表 -->
      <div class="tableHead">
        <div class="tabletitle">职位</div>
      </div>
      <!--      <el-table-->
      <!--        ref="roleTable"-->
      <!--        :data="list"-->
      <!--        v-loading="load"-->
      <!--        tooltip-effect="dark"-->
      <!--        style="width: 100%"-->
      <!--        @selection-change="select"-->
      <!--        border-->
      <!--      >-->
      <!--        <el-table-column label="序号" type="index" min-width="50"></el-table-column>-->
      <!--        <el-table-column type="selection" width="40"></el-table-column>-->
      <!--        <el-table-column prop="POSITION_CODE" label="职位代码" min-width="100"></el-table-column>-->
      <!--        <el-table-column prop="POSITION_NAME" label="职位名称" min-width="100"></el-table-column>-->
      <!--      </el-table>-->
      <el-table
        v-loading="load"
        ref="roleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        @current-change="select"
      >
        <el-table-column label="序号" type="index" min-width="50"/>
        <el-table-column prop="POSITION_CODE" label="职位代码" min-width="100"/>
        <el-table-column prop="POSITION_NAME" label="职位名称" min-width="100"/>
      </el-table>
      <!-- 分页 -->
      <div style="text-align:right">
        <Pagination
          :data="page"
          @change-size="handleSizeChange"
          @change-page="handleCurrentChange"
        />
      </div>

      <div style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="req">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPositionAuthList } from '@/api/admin/auth/positionAuth'
import Pagination from '@/components/Pagination'
// import formMixins from '@/mixins/formMixins'

export default {
  name: 'PositionInfoSelect',
  components: {
    Pagination
  },
  props: {
    dealerCodeInName: String,
    dealerDis: Boolean
  },
  data() {
    return {
      list: [],
      load: false,
      page: {},
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        positionCode: '',
        positionName: ''
      },
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    // 查询职位选择列表
    openDia() {
      this.dialogVisible = true
      this.searchRole()
    },
    // 删除经销商(采购单位)
    changeDE() {
      this.dealerCodeInName = ''
      // this.$emit('update:dealerName','');
      this.$emit('changeDE', '')
    },
    searchRole() {
      this.load = true
      getPositionAuthList(this.search)
        .then(res => {
          this.list = res.rows
          this.page = res
          this.load = false
        })
        .catch(err => {
          this.load = false
        })
    },
    // 经销商列表选择
    select(val) {
      if (val === null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    // 经销商选择分页
    handleSizeChange(size) {
      this.search.limit = size
      this.searchRole()
    },
    handleCurrentChange(page) {
      this.search.pageNum = page
      this.searchRole()
    },
    // 确定
    req() {
      debugger
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        // var positionName = "";
        // for(let i=0;i<this.multipleSelection.length;i++) {
        //   if(i === 0){
        //     positionName = this.multipleSelection[0].POSITION_NAME;
        //   }else{
        //     positionName = positionName +","+this.multipleSelection[i].POSITION_NAME;
        //   }
        // }
        this.dealerCodeInName = this.multipleSelection.POSITION_NAME// positionName;
        // this.$emit('update:dealerName',this.multipleSelection.DEALER_NAME);
        this.$emit('getPositionInfo', this.multipleSelection)
        this.dialogVisible = false
      }
    },
    resetForm() {
      this.search.positionCode = ''
      this.search.positionName = ''
      this.searchRole()
    }
  }
}
</script>

<style scoped>
</style>
